<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				background: yellow;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button id="btn">动画吧</button>
		<button id="stop">停止吧</button>
		
		<div id="box">
			hello luffy
		</div>
		
		
		
	</body>
	<script src="../jquery-3.2.1.js"></script>
	
	<script type="text/javascript">
		$(function(){
			$('#btn').click(function(){
				/*
				$('#box').animate({
					
					width:'200px',
					height:'300px'
				})
				*/
				
				$('#box').animate({left:'100px'}).delay(2000).animate({top:"400px"});

//				$('#box').animate({left:'100px',top:'300px'},2000);
				
				
			})
			
			$('#stop').click(function(){
				$('#box').stop();
			})
	
			
		})
		
	</script>
</html>
